import axios from '@/utils/axios'
import React, { memo, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { Tabs } from 'react-vant'
import { ProductCard } from 'react-vant';

const Index = memo(() => {
    const [list, setlist] = useState([])
    useEffect(() => {
        (
            async () => {
                const res = await axios.get('/tabs')
                setlist(res.data.data)
                console.log(res.data.data);
            }
        )
            ()
    }, [])
    const joop = useNavigate()
    const detit = (item: any) => {
        joop(`/tabdetitle`, { state: { item } })
    }
    return (
        <div>
            <Tabs defaultActive={0}>
                {
                    list.map((item, index) => (
                        <Tabs.TabPane key={index} title={item.tab}>
                            {
                                item.list.map((item: string, index: number) => (
                                    <ProductCard
                                        onClick={() => detit(item)}
                                        key={index}
                                        desc="描述信息"
                                        title={item.title}
                                        thumb={item.img}
                                    />
                                ))
                            }
                        </Tabs.TabPane>
                    ))
                }
            </Tabs>
        </div>
    )
}) 

export default Index
